<template>
  <div class="dialog_content">
    <el-dialog class="m_dialog" :title="dialogTitles[titleIndex] || titleIndex" :visible.sync="dialogVisible" width="800" append-to-body :before-close="cancel" :close-on-click-modal="false">
      <div class="content">
        <custom-form ref="form" :formModel="formModel" :formItemConfig="formItemConfig" :formRules="formRules" label-width="80px" label-position="left" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" class="btn_cancel">取 消</el-button>
        <el-button type="primary" @click="submitFrom" class="btn_primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDeviceBrand } from '@/api'
import { getDeviceBrandList } from "@/api/system/device/brand";
import { addDeviceRepair, updateDeviceRepair, getDeviceRepair } from "@/api/system/device/repair";
import { mapState } from "vuex";
export default {
  name: "DeviceRepair",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    titleIndex: {
      type: Number | String,
      default: 0,
    },
    formData: {
      type: Object,
      default: () => { },
    },
    dictMap: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      // 提交表单数据
      formModel: {
        // 设备报修问题 0异常 1损坏 2离线 3其他
        deviceRepairProblemType: "",
        // 问题图片
        problemPic: "",
        // 问题图片数组
        problemPics: [],
        // 问题补充
        problemRestock: "",
        // 设备id
        deviceId: "",
        // 映射厂商（设备品牌ID）
        deviceBrandId:'',
        // 映射厂商
        deviceBrandName:'',
        // 设备编码
        deviceCode: '',
        // 设备名称
        deviceName: '',
        // 设备型号
        deviceModel: '',
        // 安装位置
        installPosition: '',
      },
      // 表单配置项
      formItemConfig: [
        {
          label: "设备厂商",
          prop: "deviceBrandName",
          labelWidth: "150px",
          span: 12,
          labelWidth: "150px",
          clearable: false,
          disabled: true,
        },
        {
          label: "设备名称",
          prop: "deviceName",
          labelWidth: "150px",
          span: 12,
          labelWidth: "150px",
          clearable: false,
          disabled: true,
        },
        {
          label: "设备型号",
          prop: "deviceModel",
          labelWidth: "150px",
          span: 12,
          labelWidth: "150px",
          clearable: false,
          disabled: true,
        },
        {
          label: "设备编码",
          prop: "deviceCode",
          labelWidth: "150px",
          span: 12,
          labelWidth: "150px",
          clearable: false,
          disabled: true,
        },
        {
          label: "设备位置",
          prop: "installPosition",
          labelWidth: "150px",
          span: 12,
          labelWidth: "150px",
          clearable: false,
          disabled: true,
        },
        {
          label: "维修联系人",
          prop: "deviceBrandContacts",
          labelWidth: "150px",
          span: 12,
          labelWidth: "150px",
          clearable: false,
          disabled: true,
        },
        {
          label: "设备报修问题",
          prop: "deviceRepairProblemType",
          span: 12,
          component: "BaseSelect",
          labelWidth: "150px",
          clearable: true,
          onChange: (e) => {
            // this.formModel.mapCode = e
          }
        },
        {
          label: "问题图片",
          prop: "problemPic",
          span: 24,
          component: "BaseUpload",
          multiple: true,
          labelWidth: "150px",
          clearable: true,
          onChange: (val,e) => {
            let pic = val?.response?.data?.url || ''
            if(pic){
              this.formModel.problemPic = pic
              this.formModel.problemPics.push(pic)
            }
          },
        },
        {
          label: "问题补充",
          prop: "problemRestock",
          labelWidth: "150px",
          span: 12,
          labelWidth: "150px",
          clearable: true,
        },
      ],
      // 表单验证
      formRules: {
        deviceRepairProblemType: {
          required: true,
          message: "设备报修问题不能为空",
          trigger: "blur",
        },
        problemPic: {
          required: true,
          message: "问题图片不能为空",
          trigger: "blur",
        },
      },
    };
  },
  computed: {
    ...mapState("dialog", ["dialogTitles"]),
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler() {
        this.formModel = {...this.formModel, ...JSON.parse(JSON.stringify(this.formData))}
      },
    },
  },
  created() { },
  mounted() { },
  methods: {
    cancel() {
      this.$emit("cancel");
      this.$refs["form"].toResetFields();
      this.formModel.problemPic = ''
      this.formModel.problemPics = []
    },
    submitFrom() {
      let fields = {
        deviceId: this.formModel.deviceId,
        deviceRepairProblemType: this.formModel.deviceRepairProblemType,
        problemPics: this.formModel.problemPics,
        problemRestock: this.formModel.problemRestock
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // if (this.$utils.isNotEmpty(fields.deviceId)) {
          //   updateDeviceRepair(fields).then((res) => {
          //     if (res && 200 === res.code) {
          //       this.$message({
          //         message: "修改成功",
          //         type: "success",
          //       });
          //       this.cancel();
          //     }
          //   });
          // } else {
            addDeviceRepair(fields).then((res) => {
              if (res && 200 === res.code) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.cancel();
              }
            });
          // }
        }
      });
    },
    // 设置formItemConfig里面的字典列表
    setDictList() {
      if (this.dictMap) {
        // （设备一键报修）0：其他；1：异常；2：损坏；3：离线；
        this.$nextTick(() => {
          let obj = this.formItemConfig.filter(item => item.prop == 'deviceRepairProblemType')[0]
          this.$set(obj, 'options', this.dictMap.type.device_problem)
        })
      }
    },
    // 获取设备品牌信息
    toGetDeviceBrand(){
      if(this.formModel.deviceBrandId){
        getDeviceBrand(this.formModel.deviceBrandId).then(res => {
          if(res && 200 == res.code){
            this.$set(this.formModel, "deviceBrandContacts", res.data.deviceBrandContacts)
            this.$set(this.formModel, "deviceBrandName", res.data.deviceBrandName)
          }
        })
      }
    }
  },
  components: {},
};
</script>

<style lang="less" scoped></style>
